* {
  margin: 0;
  padding: 0;

}

.container {
  border: 0px solid #0DCAF0;
  width: 1200px;
  margin: 0 auto;
  height: 606px;
}

.message {
  border-radius: 10px;
  box-shadow: 0 10px 20px -6px rgb(0, 0, 0, 0.5);
  float: left;
  border: 1px solid black;
  width: 20%;
  height: 100%;
  padding: 20px;
}

.content {
  padding: 20px;
  border: 0px solid red;
  height: 100%;
  float: left;
  overflow: auto;
}

.job {
  width: 800px;
  height: 300px;
  border: 0px solid black;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 20px -6px rgb(0 0 0 / 50%);
  will-change: auto;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease;
}

.job:hover {
  box-shadow: 0 5px 10px 5px rgba(110, 110, 110, .4);
}

.thumb {
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;
  width: 40%;
  float: left;

}

.thumb a {
  text-decoration: none;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin: 20px 0px;
}

.thumb p {

  font-size: 18px;
  line-height: 1.7;
  color: #515151a1;
}

.thumb div {
  color: #888;
  font-size: 12px;
}

.thumb-content {
  float: right;
  width: 55%;

}

.thumb-content a {
  height: 300 px;
  position: relative;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.thumb-content a img {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 0;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: all 0.6s;
}

.thumb-content a img:hover {
  transform: scale(1.3);

}

/**
      * 头像居中   变圆
      */

.portrait img {
  display: block;
  margin: auto;
  border-radius: 50%;
  width: 60px;
}

.portrait img:hover {
  animation: portrait 1.6s ease;
}

.author {
  text-align: center;
  padding: 4px 0px;
}

.author+span {
  color: #888;
  font-size: 12px;

}

.author+span+h1 {
  margin-top: 10px;
}

.message p {
  margin: 8px 0px;
  border-bottom: 1px solid #000000;
}

@keyframes portrait {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}



.content::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
  /*外层轨道*/
}

.content::-webkit-scrollbar-thumb {
  display: block;
  width: 6px;
  margin: 0 auto;
  border-radius: 10px;
  background: #9e9d9c;
  /*内层轨道*/
}

